<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>海螺</title>
</head>
<body>

<script>
    function draw() {
        var c = document.getElementById("myCanvas");
        var cxt = c.getContext("2d");
        cxt.translate(160,30);
        cxt.fillStyle = "#00FF00";
        cxt.fillRect(0,0,100,50);

        for(var i=0;i<50;i++){
          cxt.translate(25,25);
          cxt.scale(0.95,0.95);
          cxt.rotate(Math.PI/180*18);
          cxt.fillRect(0,0,100,50);

        }

    }
</script>
<canvas width="600" height="600" id="myCanvas"
        style="border: 1px solid orangered;"></canvas>
<p><button type="button" onclick="draw();">绘图</button></p>
</fieldset>
</body>
</html>